<template>
  <div class="report-page">
    <div class="report-header ">
      <el-form :model="queryForm" label-width="120px" class="el-row" style="padding-top:1.5%">
        <el-form-item label="行政区" class="el-col el-col-5">
          <el-cascader v-model="queryForm.name" :options="options" placeholder="请选择" style="width:100%"></el-cascader>
        </el-form-item>
        <el-form-item label="指标名称" class="el-col el-col-5 el-col-offset-1">
          <el-cascader v-model="queryForm.name" :options="options" placeholder="请选择" style="width:100%"></el-cascader>
        </el-form-item>
        <el-form-item label="预警等级" class="el-col el-col-5 el-col-offset-1">
          <el-cascader v-model="queryForm.name" :options="options" placeholder="请选择" style="width:100%"></el-cascader>
        </el-form-item>
        <el-form-item label-width="0" class="el-col el-col-6" style="text-align:right">
          <el-button>搜索</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="report-body">
      <div style="padding: 5px 10px;">
        <div style=" margin: 5px 0 20px 10px;">
          <el-button type="primary" icon="el-icon-document-add">新建任务</el-button>
          <el-button type="danger" icon="el-icon-delete">删除</el-button>
          <el-button style="float:right;margin-right:10px">数据导出</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%" @selection-change="selectionChange" border>
          <el-table-column type="selection" align="center"></el-table-column>
          <el-table-column type="index" label="序号" :index="indexMethod" align="center"></el-table-column>
          <el-table-column prop="name" label="行政区" align="center"></el-table-column>
          <el-table-column prop="unit" label="指标名称" sortable align="center"></el-table-column>
          <el-table-column prop="source" label="指标属性" align="center"></el-table-column>
          <el-table-column prop="system" label="监测值" align="center"></el-table-column>
          <el-table-column label="近期规划" align="center">
            <el-table-column label="年份" align="center"></el-table-column>
            <el-table-column label="值" align="center"></el-table-column>
          </el-table-column>
          <el-table-column prop="describe" label="远期规划" sortable align="center">
            <el-table-column label="年份" align="center"></el-table-column>
            <el-table-column label="值" align="center"></el-table-column>
          </el-table-column>
          <el-table-column prop="pid" label="指标单位" align="center"></el-table-column>
          <el-table-column prop="updateTime" label="最后更新时间" align="center"></el-table-column>
          <el-table-column prop="tag" label="预警等级" sortable align="center"></el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <span class="handle-span" @click="goDetail"> 详情 </span>
              <span class="handle-span"> | 监控任务 </span>
              <span class="handle-span"> | 编辑</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="text-align: right;margin-top: 10px;" background :page-size="page.rows" :pager-count="5" :page-sizes="[5,10,20]" layout="total,  prev, pager, next,sizes, jumper, ->" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {

  data () {
    return {
      options: [],
      queryForm: {
        name: ''
      },
      page: {
        pageIndex: 0,
        rows: 10
      },
      total: 0,
      tableData: [
        {
          name: '长乐市'
        }
      ]
    }
  },
  methods: {
    handleCurrentChange (index) {
      this.page.pageIndex = index - 1
      this.getTableData()
    },
    handleSizeChange (size) {
      this.page.rows = size
      this.getTableData()
    },
    indexMethod (index) {
      let { pageIndex, rows } = this.page
      return rows * pageIndex + index + 1
    },
    selectionChange () {

    },
    getTableData () {

    },
    goDetail () {
      this.$router.push('监测预警/详情')
    }
  }
}
</script>

<style lang="less" scoped>
.report-page {
  height: 100%;
  width: 100%;
  .report-header {
    height: 10%;
    background: #fff;
  }
  .report-body {
    height: 88%;
    margin-top: 1%;
    background: #fff;
  }
  .handle-span {
    cursor: pointer;
    color: #409eff;
  }
}
</style>